<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 输入框部分 -->
        <el-form
          :inline="true"
          :model="formInline"
          ref="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="学科名称">
            <el-input
              size="small"
              @keyup.enter.native="onSubmit"
              v-model.trim="formInline.subjectName"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="formClear">清除</el-button>
            <el-button size="small" type="primary" @click="onSubmit"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 新增学科按钮 -->
        <el-button
          size="small"
          class="fr"
          type="success"
          icon="el-icon-edit"
          @click="isShow = true"
          >新增学科
        </el-button>
        <SubjectsAdd
          :nowSub="nowSubs"
          v-if="isShow"
          :title="title"
          :subList="subList"
          :dialogVisible="isShow"
          @changes="isShow = false"
          @addSub="addSubs"
        ></SubjectsAdd>
        <!-- 提示信息 -->
        <el-alert
          :title="innerText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 内部表单部分 -->
        <el-table
          fit
          highlight-current-row
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          style="width: 100%"
          :data="subList"
          :header-cell-style="{
            'background-color': '#fafafa',
            'border-bottom': '2px solid #e8e8e8'
          }"
        >
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column label="学科名称" width="100">
            <template slot-scope="scope">
              {{ scope.row.subjectName }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="100">
          </el-table-column>
          <el-table-column label="创建日期" width="180">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <template slot-scope="scope">
              {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column prop="address" label="操作" width="270">
            <template slot-scope="scope">
              <el-button type="text" @click="studyLay(scope.row)"
                >学科目录</el-button
              >
              <el-button type="text" @click="studyPage(scope.row)"
                >学科标签</el-button
              >

              <el-button type="text" @click="changeSub(scope.row)"
                >修改
              </el-button>

              <el-button type="text" @click="deleteSub(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页按钮 -->
        <div class="pagination">
          <PageTool
            :paginationPage="formInline.page"
            :paginationPagesize="formInline.pagesize"
            :total="counts"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          >
          </PageTool>
        </div>
        <SubjectsAdd
          :nowSub="nowSub"
          :subId="id"
          v-if="change"
          :title="titles"
          :subList="subList"
          :dialogVisible="change"
          @changes="change = false"
          @changeSubs="changeSubs"
        ></SubjectsAdd>
      </el-card>
    </div>
  </div>
</template>

<script>
import PageTool from "../../module-manage/components/page-tool.vue";
import SubjectsAdd from "../components/subjects-add.vue";
import { list, update, simple, remove } from "../../api/hmmm/subjects";
export default {
  name: "subjiects",
  components: {
    PageTool,
    SubjectsAdd
  },
  data() {
    return {
      change: false,
      isShow: false,
      nowSubs: {},
      id: 0,
      nowSub: {},
      subList: [],
      counts: null,
      formInline: {
        subjectName: "",
        page: 1,
        pages: 2,
        pagesize: 10
      },
      innerText: "",
      listLoading: true,
      title: "新增学科",
      titles: "修改学科",
      subdate: ""
    };
  },
  created() {
    this.loadSubjects();
  },
  methods: {
    //删除
    deleteSub(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove({ id: index })
            .then(response => {
              const totalPage = Math.ceil(
                (this.counts - 1) / this.formInline.pagesize
              ); // 总页数
              this.formInline.page =
                this.formInline.page > totalPage
                  ? totalPage
                  : this.formInline.page;

              this.subList.splice(index, 1);
              this.loadSubjects(this.formInline);
              this.$message.success("删除成功" + "!");
            })
            .catch(response => {
              this.$message.error("删除失败!");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async loadSubjects() {
      try {
        const { data } = await list({
          subjectName: this.subdate,
          page: this.formInline.page,
          pages: this.formInline.pages,
          pagesize: this.formInline.pagesize
        });
        this.subList = data.items;
        this.counts = data.counts;
        this.formInline.page = data.page;
        this.formInline.pagesize = data.pagesize;
        this.innerText = `数据一共有${this.counts}条`;
        this.listLoading = false;
      } catch (e) {
        console.log(e);
      }
    }, //搜索功能
    onSubmit() {
      this.formInline.page = 1;
      this.subdate = this.formInline.subjectName;
      this.loadSubjects(this.formInline);
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.formInline.pagesize = val;
      this.loadSubjects();
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.loadSubjects();
    },
    //添加
    addSubs(value) {
      this.subList.unshift(value);
      this.loadSubjects();
      this.isShow = false;
      this.$message.success("添加成功");
    },
    changeSub(v) {
      this.nowSub = v;
      this.change = true;
    },
    //修改
    changeSubs(s) {
      this.loadSubjects(s);
      this.change = false;
      this.$message.success("修改成功");
    },
    //清除
    formClear() {
      this.formInline.subjectName = "";
      this.onSubmit();
    },
    //跳转到学科目录
    studyLay(val) {
      this.$router.push({
        name: "subjects-directorys",
        query: {
          id: val.id,
          name: val.subjectName
        }
      });
    },
    //跳转到学科标签
    studyPage(val) {
      this.$router.push({
        name: "subjects-tags",
        query: {
          id: val.id,
          name: val.subjectName
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .demo-form-inline {
    float: left;
    padding-left: 10px;
  }
  .alert {
    margin-bottom: 15px;
  }
  .pagination {
    margin-top: 10px;
  }
}
</style>
